<template>
    <div>
        <h-section title="研发流程信息" collapse>
            <a-form layout="inline" ref="ruleFormRef" :model="form">
                <a-row>
                    <a-col :span="16">
                        <a-form-item label="当前阶段" :span="24">
                            <div class="font-w-b">{{ stage }}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="16">
                        <a-form-item label="排期" :span="24">
                            <file-cell :fileList="getFilterFiles(form.files, '排期')" v-if="disabled" />
                            <upload-cell
                                :fileParams="{ connectType: '排期', type: 1 }"
                                :fileList="getFilterFiles(form.files, '排期')"
                                @valueChange="fileChange($event, '排期')"
                                v-else
                            >
                                <template #extra>
                                    <a @click="downTemplate('productplancompose')">下载排期模板</a>
                                </template>
                            </upload-cell>
                        </a-form-item>
                    </a-col>
                    <a-col :span="16">
                        <a-form-item label="需求文档" :span="24" name="files" :rules="ruleObj['需求文档']">
                            <file-cell :fileList="getFilterFiles(form.files, '需求文档')" v-if="disabled" />
                            <upload-cell
                                :fileParams="{ connectType: '需求文档', type: 1 }"
                                :fileList="getFilterFiles(form.files, '需求文档')"
                                @valueChange="fileChange($event, '需求文档')"
                                v-else
                            >
                                <template #extra>
                                    <a @click="downTemplate('requiredoc_purchase')">下载需求文档模板</a>
                                </template>
                            </upload-cell>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <slot name="processHistoryRecord" />
        </h-section>
    </div>
</template>

<script lang="ts">
import FileCell from '@/components/FileCell/index.vue';
import UploadCell from '@/components/UploadCell/index.vue';
import { validateFileValidator } from '@/utils/validator';
import { useDownFile } from '@/hooks/common/useFile';
import { defineComponent, ref, unref, computed, watch } from 'vue';
export default defineComponent({
    name: 'StartProcess',
    components: {
        FileCell,
        UploadCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false },
        stage: { type: String, default: '' },
        hasAuth: {
            type: Boolean,
            default: false
        }
    },
    emits: ['save'],
    setup(props, { emit }) {
        const { downTemplate } = useDownFile();
        const ruleFormRef = ref<any>();
        const form = ref<any>({
            pass: '',
            files: []
        });
        const ruleObj = computed(() => {
            const ruleObj = {
                需求文档: [
                    {
                        required: true,
                        message: '需求文档不能为空',
                        validator: validateFileValidator,
                        connectType: '需求文档',
                        trigger: 'blur',
                        type: 'array'
                    }
                ]
            };
            return props.disabled ? { 需求文档: {} } : ruleObj;
        });
        const handleSave = (type: number, pass = null) => {
            form.value.pass = pass;
            unref(ruleFormRef)
                .validate()
                .then(() => {
                    emit('save', {
                        type,
                        query: {
                            ...unref(form)
                        }
                    });
                });
        };
        // 监听文件删除等操作
        const fileChange = (fileList: any[], connectType) => {
            const files = form.value.files.filter((item) => item.connectType !== connectType);
            form.value.files = [...files, ...fileList];
            emit('save', {
                type: 6,
                query: {
                    ...unref(form)
                }
            });
        };
        const getFilterFiles = (list, connectType: string) => {
            return list.filter((item) => item.connectType === connectType);
        };
        const init = () => {
            const files = props.detail.files;
            if (files && files.length) {
                form.value.files = files.filter((item) => ['需求文档', '排期'].includes(item.connectType));
            }
        };
        init();
        watch(
            () => props.detail.files,
            (n, o) => {
                // 如果最开始是禁用，则无需调用查询接口
                if (JSON.stringify(n) !== JSON.stringify(o)) {
                    init();
                }
            },
            {
                deep: true
            }
        );
        return {
            ruleFormRef,
            form,
            ruleObj,
            handleSave,
            fileChange,
            getFilterFiles,
            downTemplate
        };
    }
});
</script>

<style scoped lang="less">
@import './styles/index.less';
</style>